<template>
    <div class="busTow">
      {{msg}}
      <p><input type="text" class="msg"  v-model="value" placeholder="请输入显示到兄弟组件上的文字"  @input="showToOne"/></p>
      <p>兄弟组件传来的值: <span class="one">{{dataFromOne}}</span></p>
    </div>
</template>
<script>
import {eventBus} from '../../eventBus.js'
export default {
  data() {
    return {
      msg: '我是第二个子组件busTwo',
      value: null,
      dataFromOne:'第二个子组件'
    };
  },
  created() {
    eventBus.$on('change',(data) =>{
       console.log('busTwo的created()的this指向  ',this); // 输出的结果： busTwo的created()的this指向   VueComponent {_uid: 21, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent…}
       this.dataFromOne = data;
    });
  },
  methods: {
      showToOne() {
         console.log('我是第二个子组件触发改变数据  ',this.value);
         let data = this.value;
         eventBus.$emit('msg',data); // 事件触发数据改变
      }
  }
}
</script>
<style lang="scss">
 .busTow {
    width:100%;
    height:300px;
    background: red;
    color:white;
    .two {
     font-size: 14px;
     font-weight: bold;
    }
    .msg {
      width: 280px;
    }
 }
</style>

